<template lang="html">
  <div class="musicGeDan">
  <router-link to="/">
    <MusicDaoHang />
  </router-link>
  <MusicTable />
  <p id="musicHr"></p>
<!-- 分类开始 -->
<div class="daohang">
  <ul>
    <router-link tag="li" to="/hottuijian">
      热门推荐
    </router-link>

    <router-link tag="li" to="/newtuijian">
      最新推荐
    </router-link>
  </ul>
  <div class="qingchu"></div>
</div>
<!--分类结束  -->
<MusicBottomList />
  </div>
</template>

<script>
import MusicDaoHang from "../../components/musicDaoHang"
import MusicTable from "../../components/musicTable"
import MusicBottomList from "../../components/musicBottomList"
export default {
  name:'musicGeDan',
  data(){
    return{

    }
  },
  components:{
    MusicDaoHang,
    MusicTable,
    MusicBottomList
  }
}
</script>

<style scoped>
.musicGeDan #musicHr{
  width: 100%;
  height: 0.2rem;
  background: #cccccc;
}
.daohang{
  background: #ffffff;
}
.daohang ul li{
  float: left;
  font-size: 0.35rem;
  color: black;
  width: 50%;
  text-align: center;
  height: 0.8rem;
  line-height: 0.8rem;
  font-weight: bold;
}
.qingchu{
  clear: both;
}
</style>
